<template>
  <div class="login-container">
    <div class="panda-container">
      <div class="panda-ear left"></div>
      <div class="panda-ear right"></div>
      <div class="panda-face">
        <div class="panda-eye-shadow left">
          <div class="panda-eye-white">
            <div class="panda-eye-ball"></div>
          </div>
        </div>
        <div class="panda-eye-shadow right">
          <div class="panda-eye-white">
            <div class="panda-eye-ball"></div>
          </div>
        </div>
        <div class="panda-nose"></div>
        <div class="panda-mouth"></div>
      </div>
      <div class="panda-body"></div>
      <div class="panda-foot left">
        <div class="panda-sole"></div>
      </div>
      <div class="panda-foot right">
        <div class="panda-sole"></div>
      </div>
    </div>
    <div
      :class="{
        'form-box': true,
        up: pwdFocus,
      }"
    >
      <div class="panda-hand left"></div>
      <div class="panda-hand right"></div>
      <h3 class="form-title">后台管理系统登录</h3>
      <div class="login-form-panel">
        <lt-form :model="formFields" :rules="rules" label-position="top">
          <lt-form-item name="username">
            <lt-md-input
              v-model="formFields.username"
              label="用户名"
            ></lt-md-input>
          </lt-form-item>
          <lt-form-item name="password">
            <lt-md-input
              v-model="formFields.password"
              label="密码"
              @focus="handlePwdFocus"
              @blur="handlePwdBlur"
            ></lt-md-input>
          </lt-form-item>
          <lt-form-item label="" class="btn-form-item">
            <lt-button html-type="submit" class="submit-btn">提交</lt-button>
          </lt-form-item>
        </lt-form>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref } from "vue";
import { useFormReset } from "@asteres/litos-ui-vue";

const { formFields } = useFormReset({
  username: "",
  password: "",
});
const rules = [
  {
    key: "username",
    rules: ["required"],
    message: "用户名不能为空",
  },
  {
    key: "password",
    rules: [/^(?=.*[0-9])(?=.*[a-zA-Z])([a-zA-Z0-9]{6,15})$/],
    message: "密码为6~15位字母+数字",
  },
];

const pwdFocus = ref(false);

function handlePwdFocus() {
  pwdFocus.value = true;
}

function handlePwdBlur() {
  pwdFocus.value = false;
}
</script>

<style lang="less">
.login-container {
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  background: linear-gradient(200deg, #37e2b2, #2fa080);

  .panda-container {
    position: relative;
    width: 200px;
  }

  .panda-ear {
    width: 70px;
    height: 70px;
    border-radius: 50%;
    background-color: #000;
    position: absolute;
    top: -10px;
  }

  .panda-ear.right {
    right: 0;
  }

  .panda-face {
    width: 200px;
    height: 200px;
    border-radius: 50%;
    background-color: #fff;
    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.2);
    position: relative;
    z-index: 1;
  }

  .panda-eye-shadow {
    width: 50px; /* 设置宽度为50px */
    height: 80px; /* 设置高度为80px */
    background-color: #000; /* 设置背景色为黑色 */
    border-radius: 50%; /* 设置边框半径为50%，即半圆形 */
    position: absolute; /* 设置绝对定位 */
    top: 40px; /* 设置距离顶部的距离为40px */
  }

  /* 设置左侧的eye-shadow样式 */
  .panda-eye-shadow.left {
    transform: rotate(45deg); /* 旋转45度 */
    left: 30px; /* 设置距离容器左侧的距离为30px */
  }

  /* 设置右侧的eye-shadow样式 */
  .panda-eye-shadow.right {
    transform: rotate(-45deg); /* 旋转-45度 */
    right: 30px; /* 设置距离容器右侧的距离为30px */
  }

  .panda-eye-white {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background-color: #fff;
    position: absolute;
    top: 25px;
  }
  .panda-eye-shadow.left .panda-eye-white {
    left: 10px;
  }
  .panda-eye-shadow.right .panda-eye-white {
    right: 10px;
  }

  .panda-eye-ball {
    width: 20px;
    height: 20px;
    background-color: #000;
    border-radius: 50%;
    position: absolute; /* 设置为绝对定位，使其可以相对于最近的已定位父元素进行定位 */
    left: 5px; /* 距离左侧父元素5px */
    top: 5px; /* 距离顶部父元素5px */
  }

  .panda-nose {
    width: 36px;
    height: 20px;
    border-radius: 50%;
    background-color: #000;
    position: absolute;
    left: 50%; /* 距离左侧父元素0px */
    transform: translateX(-50%);
    bottom: 65px; /* 距离底部父元素65px */
    border-radius: 42px 42px 60px 60px / 30px 30px 60px 60px;
  }

  .panda-mouth {
    width: 68px; /* 设置嘴巴的宽度为68px */
    height: 25px; /* 设置嘴巴的高度为25px */
    border-bottom: 7px solid #000; /* 底部边框为7px的实线，颜色为黑色 */
    border-radius: 50%; /* 设置边框半径为50%，使嘴巴呈半圆形 */
    position: absolute; /* 设置为绝对定位 */
    left: 50%; /* 距离左侧父元素0px */
    transform: translateX(-50%);
    bottom: 35px; /* 距离底部父元素35px */
  }

  .panda-body {
    width: 250px;
    height: 280px;
    background: #fff;
    position: relative;
    left: -25px;
    top: -20px;
    border-radius: 100px 100px 100px 100px / 126px 126px 96px 96px;
    box-shadow: 0 5px 10px rgba(0, 0, 0, 0.3);
  }

  .panda-foot {
    width: 80px;
    height: 120px;
    border-radius: 40px 40px 35px 40px / 26px 26px 63px 63px;
    position: absolute;
    background: #000;
    bottom: 10px;
    box-shadow: 0 5px 5px rgba(0, 0, 0, 0.2);
    z-index: 5;
  }
  .panda-foot.left {
    left: -80px;
  }
  .panda-foot.right {
    right: -80px;
    transform: rotateY(180deg);
  }
  .panda-foot::after {
    content: ""; /* 使用伪元素生成内容，但不显示实际内容 */
    width: 55px; /* 设置内部阴影部分的宽度为55px */
    height: 65px; /* 设置内部阴影部分的高度为65px */
    background-color: #222; /* 设置内部阴影部分的颜色为深灰色 */
    position: absolute; /* 设置为绝对定位 */
    border-radius: 50%; /* 设置边框半径为50%，使内部阴影部分呈圆形 */
    left: 50%; /* 距离左侧父元素0px */
    transform: translateX(-50%);
    bottom: 10px; /* 距离脚部底部10px */
  }

  .panda-sole,
  .panda-sole::before,
  .panda-sole::after {
    width: 20px; /* 设置脚底及其伪元素的宽度为20px */
    height: 30px; /* 设置脚底及其伪元素的高度为30px */
    background-color: #222; /* 设置脚底及其伪元素的颜色为深灰色 */
    position: absolute; /* 设置为绝对定位 */
    border-radius: 50%; /* 设置边框半径为50%，使脚底及其伪元素呈圆形 */
    left: 0; /* 距离左侧父元素0px */
    right: 0; /* 距离右侧父元素0px，这里和left一起使用是为了水平居中 */
    margin: auto; /* 自动计算左右外边距，使元素水平居中 */
    top: 8px; /* 距离脚部顶部8px */
  }
  .panda-sole::before {
    content: ""; /* 使用伪元素生成内容，但不显示实际内容 */
    left: -50px; /* 相对于脚底元素向左偏移-50px，即向左偏移50px */
  }

  /* 脚底右侧伪元素 */
  .panda-sole::after {
    content: ""; /* 使用伪元素生成内容，但不显示实际内容 */
    left: 25px; /* 相对于脚底元素向右偏移25px */
  }

  .panda-hand,
  .panda-hand::before,
  .panda-hand::after {
    width: 40px; /* 设置宽度为40px */
    height: 30px; /* 设置高度为30px */
    background-color: #000; /* 设置背景颜色为黑色 */
    border-radius: 50px; /* 设置边框半径为50px，这里其实等于width/2，使形状呈圆形 */
    position: absolute; /* 设置为绝对定位 */
    top: 70px; /* 距离父元素顶部70px */
    left: -20px; /* 距离父元素左侧-20px，即向左偏移20px */
  }

  /* 设置手的前伪元素样式 */
  .panda-hand::before {
    content: ""; /* 使用伪元素生成内容，但此处不显示实际内容 */
    top: 16px; /* 距离手元素顶部16px */
    left: 0; /* 距离手元素左侧0px */
  }

  /* 设置手的后伪元素样式 */
  .panda-hand::after {
    content: ""; /* 使用伪元素生成内容，但此处不显示实际内容 */
    top: 32px; /* 距离手元素顶部32px */
    left: 0; /* 距离手元素左侧0px */
  }

  /* 设置右手的样式 */
  .panda-hand.right {
    right: -20px; /* 距离父元素右侧-20px，即向右偏移20px */
    left: auto; /* 取消之前的left定位，让right定位生效 */
  }

  /** 表单输入框样式 */
  .form-box {
    width: 400px;
    height: 300px;
    position: absolute;
    top: 50%;
    left: 50%;
    z-index: 2;
    transform: translate(-50%, -110px);
    background-color: #fff;
    border-radius: 3px;
    box-shadow: 0 0 15px rgba(0, 0, 0, 0.2);
    transition: all 0.3s ease-in-out;
    box-sizing: border-box;
  }

  .up {
    transform: translate(-50%, -180px);
  }

  .form-title {
    font-size: 26px;
    text-align: center;
  }

  .login-form-panel {
    margin-top: 30px;
    padding: 0 50px;
  }

  .btn-form-item .nt-form-item__content {
    justify-content: center;
  }

  .submit-btn {
    width: 40%;
    margin: 20px;
  }
}
</style>
